<template>
  <div class="location-select-container">
    <el-select class="col-4"
               value-key="code"
               :disabled="statusVal==='detail'"
               style="margin-right:10px;"
               v-model="provinceData.province_no"
               placeholder="请选择省份"
               @change="chooseProvince">
      <el-option label="请选择省份"
                 value="0"
                 key="0"> </el-option>
      <el-option v-for="item in provinceList"
                 :key="item.area_id"
                 :label="item.province"
                 :value="item.province_no">
      </el-option>
    </el-select>
    <el-select class="col-4"
               value-key="code"
               style="margin-right:10px;"
               :disabled="statusVal==='detail'||!provinceData.province_no"
               v-model="cityData.city_no"
               placeholder="请选择城市"
               @change="chooseCity(cityData.city_no,'')">
      <el-option label="请选择城市"
                 value="0"> </el-option>
      <el-option v-for="item in cityList"
                 :key="item.area_id"
                 :label="item.city"
                 :value="item.city_no">
      </el-option>
    </el-select>
    <el-select class="col-4"
               value-key="code"
               :disabled="statusVal==='detail'||!cityData.city_no"
               v-model="areaData.area_no"
               placeholder="请选择区域"
               @change="chooseArea(areaData.area_no,'')">
      <el-option label="请选择区域"
                 value="0"> </el-option>
      <el-option v-for="item in areaList"
                 :key="item.area_id"
                 :label="item.area"
                 :value="item.area_no">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { MyCompanyApi } from '@/services/WorkBench';
// import { locationData } from '@/assets/json/locationData'
// import { locateData } from '@/assets/json/locate'
export default {
  data () {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      selectedLocation: {
        province: '',
        province_no: '',
        city: '',
        city_no: '',
        area: '',
        area_no: ''
      },
      defaultForm: {
        province: '',
        province_no: '',
        city: '',
        city_no: '',
        area: '',
        area_no: ''
      },
      provinceData: {
        province: '',
        province_no: ''
      },
      cityData: {
        city: '',
        city_no: ''
      },
      areaData: {
        area: '',
        area_no: ''
      }
    }
  },
  props: {
    callBackLocationFunc: Function,
    currentProBaseInfoComp: {
      type: String,
      default: () => {
        return ''
      }
    },
    locaData: Object,
    statusVal: {
      type: String,
      default: ''
    }
  },
  methods: {
    proCityAreaReset () {//省市区重置
      this.provinceList = []
      this.cityList = []
      this.areaList = []
    },
    //获取省列表数据
    getProvinceData () {
      this.proCityAreaReset();//重置
      return MyCompanyApi.getProvinceCityAreaData({
        params: {
          area_type: '1'
        }
      }).then(res => {
        if (res.data) {
          this.provinceList = res.data;//获取省的数据
        }
      }, err => {
        console.log(err)
      })
    },
    getCityData (proNo) {//获取市的下拉数据
      this.cityList = []
      return MyCompanyApi.getProvinceCityAreaData({
        params: {
          area_type: '2',
          province_no: proNo
        }
      }).then(res => {
        if (res.data) {
          this.cityList = res.data;//获取市的数据
        }
      }, err => {
        console.log(err)
      });
    },
    getProName (proNo) {
      let proName = '';//省的名称
      this.provinceList.map(item => {
        if (item.province_no == proNo) {
          proName = item.province;
        }
      });
      return proName;
    },
    // 选择省份
    chooseProvince (proNo) {
      // this.cityList = item.children
      let proName = this.getProName(proNo);//获取省的名称;
      this.getCityData(proNo);//获取市的下拉数据
      this.provinceData.province_no = proNo;
      this.provinceData.province = proName;
      this.selectedLocation.province = proName;
      this.selectedLocation.province_no = proNo;
      this.selectedLocation.city = '';
      this.selectedLocation.city_no = '';
      this.selectedLocation.area = ''
      this.selectedLocation.area_no = ''
      this.$set(this.selectedLocation, 'area_id', '')
      this.$emit('update:locaData', this.selectedLocation)
      this.areaList = []
      this.cityData = {}
      this.areaData = {}
    },
    getAreaData (cityNo) {//获取区的下拉数据
      this.areaList = []
      return MyCompanyApi.getProvinceCityAreaData({
        params: {
          area_type: '3',
          city_no: cityNo
        }
      }).then(res => {
        if (res.data) {
          this.areaList = res.data;//获取区的数据
        }
      }, err => {
        console.log(err)
      });
    },
    getCityName (cityNo) {
      let cityName = '';//市的名称
      this.cityList.map(item => {
        if (item.city_no == cityNo) {
          cityName = item.city;
        }
      });
      return cityName;
    },
    // 选择城市
    chooseCity (cityNo, areaIsValue) {
      // this.areaList = item.children
      let cityName = this.getCityName(cityNo);//获取市的名称;
      this.getAreaData(cityNo);//获取区的下拉数据
      this.cityData.city = cityName;
      this.cityData.city_no = cityNo;
      this.selectedLocation.province = this.provinceData.province
      this.selectedLocation.province_no = this.provinceData.province_no
      this.selectedLocation.city = this.cityData.city
      this.selectedLocation.city_no = this.cityData.city_no
      this.selectedLocation.area = ''
      this.selectedLocation.area_no = ''
      this.$set(this.selectedLocation, 'area_id', '')
      if (areaIsValue == '') {//编辑的时间不监听
        this.$emit('update:locaData', this.selectedLocation)
      }
      this.areaData = {}
    },
    getAreaName (val) {//获取区的名称;
      let areaName = '';//区的名称
      this.areaList.map(item => {
        if (item.area_no == val) {
          areaName = item.area;
        }
      });
      return areaName;
    },
    getAreaId (val) {
      let areaId = '';//区的主键值
      this.areaList.map(item => {
        if (item.area_no == val) {
          areaId = item.area_id;
        }
      });
      return areaId;
    },
    // 选择区域
    chooseArea (val, areaIsValue) {
      let areaName = this.getAreaName(val);//获取区的名称;
      let areaId = this.getAreaId(val);//区的id;
      this.areaData.area = areaName;
      this.areaData.area_no = val;
      let cityNo = this.cityData.city_no;
      this.selectedLocation.province = this.provinceData.province
      this.selectedLocation.province_no = this.provinceData.province_no;
      this.cityData.city = this.getCityName(cityNo);//市的名称
      this.selectedLocation.city = this.getCityName(cityNo);//市的名称
      this.selectedLocation.city_no = cityNo;
      this.selectedLocation.area = areaName
      this.selectedLocation.area_no = val
      this.$set(this.selectedLocation, 'area_id', areaId);
      if (areaIsValue == '') {
        this.$emit('update:locaData', this.selectedLocation);
      }
    },
    // 初始化数据
    initProvinceData (provinceNo, cityNo, areaNo, areaIsValue) {
      this.provinceList.map(async item => {
        if (item.province_no === provinceNo) {
          // this.$nextTick(() => { })
          this.provinceData = { province: item.province, province_no: item.province_no };

          if (this.cityList.length == 0) {
            await this.chooseCity(cityNo, areaIsValue);//市
            await this.getCityData(provinceNo)//市下拉
          }
          if (this.areaList.length == 0) {
            await this.chooseArea(areaNo, areaIsValue);//区
            await this.getAreaData(cityNo);//区下拉?
          }
        }
      });
    },
    // 清空下拉框
    reset () {
      this.provinceData = { province: '', province_no: '' }
      this.cityData = { city: '', city_no: '' }
      this.areaData = { area: '', area_no: '' }
    }
  },
  watch: {
    locaData: {
      async handler (newval, oldval) {
        // await this.getProvinceData();//获取省的列表接口
        this.selectedLocation = JSON.parse(JSON.stringify(newval))
        if (this.selectedLocation.city_no == '' && this.selectedLocation.area_no == '') {
          this.areaList = [];
          this.cityList = [];
        }
        if (!this.selectedLocation.city_no && !this.selectedLocation.province_no) {
          this.selectedLocation = Object.assign(
            this.selectedLocation,
            this.defaultForm
          )
          this.reset()
        }
        if (this.selectedLocation.area_no !== '') {
          // 没有区的情况下，使用area_no
          let provincNo = this.selectedLocation.province_no;
          let cityNo = this.selectedLocation.city_no;
          let areaNo = this.selectedLocation.area_no;
          await this.initProvinceData(provincNo, cityNo, areaNo, 1)
        }
      },
      deep: true
    }
  },
  async created () {
    this.selectedLocation = JSON.parse(JSON.stringify(this.locaData))
    await this.getProvinceData();//获取省的列表接口
    if (!this.selectedLocation.area_no) {
      this.selectedLocation = Object.assign(
        this.selectedLocation,
        this.defaultForm
      )
    };
    if (this.selectedLocation.area_no !== '') {
      let proNo = this.selectedLocation.province_no;//省的编号
      let cityNo = this.selectedLocation.city_no;//市的编号
      let areaNo = this.selectedLocation.area_no;//区的编号
      this.initProvinceData(proNo, cityNo, areaNo, 1)
    }
  },
  mounted () { }
}
</script>
<style scoped lang="scss">
.location-select-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.el-select {
  width: 33% !important;
}
</style>